<template>

    <div>
        <label for="yaoyueshezhi">邀约设置</label>
        <el-form :inline="false" ref="form" label-width="100px"
            style=" display: flex;flex-direction: column;margin-top: 20px;">
            <el-form-item style="width: 80%;" label="邀约计划名称" prop="title">
                <el-input placeholder="请输入邀约计划名称" v-model="title"></el-input>
            </el-form-item>
            <el-form-item style="width: 80%;" label="邀约客户" prop="external_userid">
                <div style="display: flex;flex-direction: column;background-color: rgb(180, 180, 180);padding: 20px;">
                    <!--根据时间添加客户-->
                    <div style="display: flex;">
                        <span class="demonstration">添加时间：</span>
                        <div class="block">
                            <el-date-picker v-model="adddate" type="datetimerange"  align="right" unlink-panels
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <el-button type="primary" size="small" @click="adduserbydate">添加</el-button>
                    </div>
                    <!--选择标签添加客户-->
                    <div style="display: flex;margin-top: 30px;">
                        <span class="demonstration">选择标签：</span>
                        <el-button type="primary" size="small" @click="adduserbybiaoqian">选择标签</el-button>
                    </div>
                    <!--选择标签添加客户-->
                    <div style="display: flex;margin-top: 30px;">
                        <span class="demonstration">下单时间筛选：</span>
                        <el-button type="primary" size="small" @click="ordertime_adduserbybiaoqian">选择下单时间</el-button>
                    </div>
                    <!--搜索名字添加用户-->
                    <div style="display: flex;margin-top: 30px;width: 70%;">
                        <span class="demonstration">客户名称：</span>
                        <el-input placeholder="请输入关键字" v-model="wx_name2"></el-input>
                        <el-button type="primary" size="small" @click="adduserbyname">搜索</el-button>
                    </div>
                </div>
            </el-form-item>
            <el-form-item style="width: 80%;" label="查看客户">
                <!--查看人员-->
                <div class="renyuan_content">

                    <div class="biaoqian_content2">
                        <!--已选标签-->
                        <div class="biaoqian_right_content2">
                            <div style="display: flex;flex-direction: column;">
                                <div>已选 {{ senddata_count }}</div>
                            </div>
                            <div class="biaoqian_right_content_item">
                                <div class="biaoqian_right_content_item_contnet" style="justify-content: left;">
                                    <div  class="biaoqian_left_content_content_item_content_title"
                                        v-for="(item2, index2) in senddata_zhujiao" :key="index2">
                                        {{ index2 }}:{{ item2 }}
                                    </div>
                                </div>
                            </div>
                            <div style="overflow-y: scroll; max-height: 300px;">
                                <el-table :data="senddata" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                                    stripe default-expand-all>
                                    <el-table-column prop="wx_unionid" label="客户" width="250">
                                        <template slot-scope="scope">
                                            <span style="display: flex;height: 30px;line-height: 30px;width: auto;">
                                                <img :src="scope.row.wx_avatar" width="30px" height="30px"
                                                    style="margin-right: 5px;border-radius: 100%;">
                                                {{ scope.row.wx_name }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="sender" label="邀约人" width="250" align="center"
                                        header-align="center">
                                        <template slot-scope="scope">
                                            <el-tag type="success">{{ scope.row.zhujiaoname }}</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="address" label="操作" width="250" align="center"
                                        header-align="center">
                                        <template slot-scope="scope">
                                            <PersButton type="text" size="mini" label="删除" icon="fa  fa-undo"
                                                perms="live:invitation:user_del" @click="clickkehudel(scope.row)">
                                            </PersButton>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>

                        </div>

                    </div>
                </div>
            </el-form-item>
        </el-form>



        <!--选择标签-->
        <el-dialog v-dialogDrag :visible.sync="biaoqianopen" width="60%" height="600px" append-to-body title="选择标签">

            <div class="biaoqian_content">
                <!--选择标签-->
                <div class="biaoqian_left_content">
                    <div class="biaoqian_left_content_title">
                        <el-input placeholder="请输入关键字" v-model="addbiaoqianform.title"></el-input>
                        <el-button type="primary" size="mini" @click="querybiaoqian">查询</el-button>
                        <el-button size="mini" @click="resetbiaoqian">重置</el-button>
                    </div>
                    <div class="biaoqian_left_content_content">
                        <div class="biaoqian_left_content_content_item" v-for="item in biaoqianlist"
                            :key="item.groups.id">
                            <div class="biaoqian_left_content_content_item_title">{{ item.groups.name }}</div>
                            <div class="biaoqian_left_content_content_item_content2">
                                <div class="biaoqian_left_content_content_item_content" v-for="item2 in item.tags"
                                    :key="item2.id">
                                    <div @click="clickbiaoqian(item.groups, item2)"
                                        :class="item2.click == 1 ? 'biaoqian_left_content_content_item_content_title2' : 'biaoqian_left_content_content_item_content_title'">
                                        {{ item2.name }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--已选标签-->
                <div class="biaoqian_right_content">
                    <div>已选 {{ biaoqianlist_hav_count }}</div>
                    <div class="biaoqian_right_content_item">
                        <div class="biaoqian_right_content_item_top">点击删除</div>
                        <div class="biaoqian_right_content_item_contnet">
                            <div @click="clickbiaoqiandel(item2.groups, item2.tags, index2)"
                                class="biaoqian_left_content_content_item_content_title"
                                v-for="(item2, index2) in biaoqianlist_hav" :key="index2">
                                {{ item2.tags.name }}
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="biaoqianopen = false" size="small">取 消</el-button>
                <el-button type="primary" @click="submitbiaoqianForm" size="small">确
                    定</el-button>
            </div>

        </el-dialog>

        <!--选择下单时间标签-->
        <el-dialog v-dialogDrag :visible.sync="ordertime_biaoqianopen" width="60%" height="600px" append-to-body
            title="下单时间筛选">

            <div class="biaoqian_content">
                <!--选择下单时间标签-->
                <div class="biaoqian_left_content">
                    <div class="biaoqian_left_content_title">
                        <span class="demonstration">下单时间：</span>
                        <div class="block">
                            <el-date-picker v-model="ordertime_adddate" type="datetimerange" align="right" unlink-panels
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"  :default-time="['00:00:00', '23:59:59']"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                        <el-button type="primary" size="small" @click="ordertime_adduserbydate">筛选</el-button>
                    </div>
                    <div style="display: flex;margin-top: 20px;">
                        <el-button type="primary" size="small" @click="ordertime_biaoqian_all">全选</el-button>
                        <el-button type="primary" size="small"
                            @click="ordertime_biaoqian_allweiyaoyue">所有未邀约</el-button>
                        <el-button type="primary" size="small" @click="ordertime_biaoqian_allweidaoke">所有未到课</el-button>
                    </div>
                    <div class="biaoqian_left_content_content">
                        <div class="biaoqian_left_content_content_item" v-for="(item, index) in ordertime_biaoqianlist"
                            :key="index">
                            <div class="biaoqian_left_content_content_item_title">{{ item.weiyaoyue.date }}<span style="color:rgb(180, 180, 180);margin-left: 20px;">领课加V数：{{ item.lingke_jiav.num }}   已邀约数：{{ item.yiyaoyue.num }}   邀约已到课：{{ item.yiyaoyue_yidaoke.num }}</span></div>
                            <div class="biaoqian_left_content_content_item_content2">
                                <div class="biaoqian_left_content_content_item_content">
                                    <div @click="ordertime_clickbiaoqian(item.weiyaoyue)"
                                        :class="item.weiyaoyue.click == 1 ? 'biaoqian_left_content_content_item_content_title2' : 'biaoqian_left_content_content_item_content_title'">
                                        {{ item.weiyaoyue.name }}(<span style="color: blue;">{{ item.weiyaoyue.num
                                            }}</span>)
                                    </div>
                                    <div @click="ordertime_clickbiaoqian(item.weidaoke)"
                                        :class="item.weidaoke.click == 1 ? 'biaoqian_left_content_content_item_content_title2' : 'biaoqian_left_content_content_item_content_title'">
                                        {{ item.weidaoke.name }}(<span style="color: blue;">{{ item.weidaoke.num
                                            }}</span>)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!--已选下单时间标签-->
                <div class="biaoqian_right_content">
                    <div>已选 {{ ordertime_biaoqianlist_hav_count }}</div>
                    <div class="biaoqian_right_content_item">
                        <div style="display: flex;align-items: space-between;width: 100%;">
                            <div class="biaoqian_right_content_item_top">点击删除</div>
                            <el-button   type="danger" size="small" @click="ordertime_delall" round>删除所有</el-button>
                        </div>
                        <div class="biaoqian_right_content_item_contnet">
                            <div @click="ordertime_clickbiaoqiandel(index2, item2)"
                                class="biaoqian_left_content_content_item_content_title"
                                v-for="(item2, index2) in ordertime_biaoqianlist_hav" :key="index2">
                                {{ item2.date }}-{{ item2.name }}(<span style="color: blue;">{{ item2.num
                                    }}</span>)
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="ordertime_biaoqianopen = false" size="small">取 消</el-button>
                <el-button type="primary" @click="ordertime_submitbiaoqianForm" size="small">确
                    定</el-button>
            </div>

        </el-dialog>


        <!--邀约内容-->
        <div class="yaoyue_neirong_content">
            <div class="yaoyue_neirong_content_title">邀约内容</div>
            <div class="yaoyue_neirong_content_body">
                <!-- <div class="yaoyue_neirong_content_body_title">标题：{{ yaoyue.title }}</div>
                <div class="yaoyue_neirong_content_body_title">内容：{{ yaoyue.desc }}</div>
                <div class="yaoyue_neirong_content_body_title">链接：{{ yaoyue.url }}</div> -->
                <div>链接请填写<span style="color:red;">[链接]</span>   例如：这是一个<span style="color:red;">[链接]</span></div>
                <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea">
                </el-input>
            </div>
        </div>



        <div style="width: 80%;display: flex;justify-content: center;margin-top: 40px;">
            <el-button size="small" @click="goback">返回</el-button>
            <el-button type="primary" size="small" @click="savepublish">保存并发布</el-button>
        </div>

    </div>
</template>


<script>
import { querycontent, querytagUser, queryUser, querybiaoqian, savepublish, ordertime_queryUser } from '@/api/live/invitation';
import debounce from '@/common/debounce.js'
import PersButton from '@/components/PersButton';

export default {
    components: {
        PersButton
    },
    data() {
        return {
            textarea: '',
            title: '',
            wx_name2: '',
            sender: this.$route.query.sender,
            sendername: this.$route.query.sendername,
            senddata_count: 0,
            senddata: [],
            addbiaoqianform: {
                title: ''
            },
            biaoqianlist: [],
            biaoqianlist_hav: [],
            biaoqianlist_hav_count: 0,
            biaoqianopen: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            adddate: '',
            liveId: this.$route.query.liveId,
            venue: this.$route.query.venue,
            content: {
                sender: this.$route.query.sender,
                liveId: this.$route.query.liveId
            },
            ordertime_biaoqianopen: false,
            ordertime_adddate: '',
            ordertime_biaoqianlist: [],
            ordertime_biaoqianlist_hav: [],
            ordertime_biaoqianlist_hav_count: 0,
            senddata_zhujiao:[]
        }
    },
    created() {

        // 或者通过$route获取参数
        console.log(this.$route.query.liveId);
        this.liveId = this.$route.query.liveId;
        this.init();

    },

    methods: {
        init() {
            this.loading = true;
            querybiaoqian(this.addbiaoqianform).then((res) => {
                console.log(res);
                this.biaoqianlist = res.data;
            }),
                console.log(this.content);
            // querycontent(this.content).then((res) => {
            //     console.log(res);
            //     this.textarea = res.data.desc;
            // });
        },
        adduserbybiaoqian() {
            this.biaoqianopen = true;
        },
        querybiaoqian() {
            querybiaoqian(this.addbiaoqianform).then((res) => {
                console.log(res);
                this.biaoqianlist = res.data;
            })
        },
        resetbiaoqian() {
            this.addbiaoqianform = {
                title: ''
            };
            this.init();
        },
        clickbiaoqian(group, tag) {
            let a = {
                groups: group,
                tags: tag
            };

            if (this.biaoqianlist_hav.length > 0) {
                var b = true;
                this.biaoqianlist_hav.forEach(element => {

                    if (a.tags.tagid == element.tags.tagid) {
                        b = false;
                    }
                });
                if (b) {
                    this.biaoqianlist_hav.push(a);
                }
            } else {
                this.biaoqianlist_hav.push(a);
            }


            this.biaoqianlist_hav_count = this.biaoqianlist_hav.length;
            this.biaoqianlist[group.groupid]['tags'][tag.tagid].click = 1;
            console.log(this.biaoqianlist[group.groupid]);
        },
        clickbiaoqiandel(group, tag, index) {

            this.biaoqianlist_hav.splice(index, 1);
            this.biaoqianlist_hav_count = this.biaoqianlist_hav.length;
            this.biaoqianlist[group.groupid]['tags'][tag.tagid].click = 0;

        },
        submitbiaoqianForm() {

            if (this.biaoqianlist_hav.length <= 0) {
                this.$notify({
                    title: '警告',
                    message: '至少一个标签',
                    type: 'warning'
                });
                return;
            }

            let tags = [];

            this.biaoqianlist_hav.forEach(element => {
                tags.push(element.tags.tagid);
            });

            let data = {
                "tags": tags,
                "sender": this.sender
            }

            querytagUser(data).then((res) => {
                console.log(res);
                this.biaoqianopen = false;
                if (res.data.length == 0) {
                    this.$notify({
                        title: '警告',
                        message: '没有找到该标签下的用户',
                        type: 'warning'
                    });
                    return;
                }
                if (this.senddata.length > 0) {
                    res.data.forEach(element => {
                        var a = true;
                        console.log(element);
                        this.senddata.forEach(element2 => {
                            if (element.userid == element2.userid) {
                                a = false;
                            }
                        });
                        console.log(a);
                        if (a) {
                            this.senddata.push(element);
                        }
                    });
                } else {
                    res.data.forEach(element => {
                        this.senddata.push(element);
                    });
                }

                this.senddata_count = this.senddata.length;
            });


        },

        ordertime_adduserbybiaoqian() {
            this.ordertime_biaoqianopen = true;
        },
        ordertime_querybiaoqian() {
            querybiaoqian(this.addbiaoqianform).then((res) => {
                console.log(res);
                this.biaoqianlist = res.data;
            })
        },

        ordertime_clickbiaoqian(item) {
            console.log(item);
            if (this.ordertime_biaoqianlist_hav.length > 0) {
                var a = true;
                this.ordertime_biaoqianlist_hav.forEach(element => {
                    if (item.id == element.id) {
                        a = false;
                    }
                });
                if (a) {
                    this.ordertime_biaoqianlist_hav.push(item);
                }
            } else {
                this.ordertime_biaoqianlist_hav.push(item);
            }




            this.ordertime_biaoqianlist_hav_count = this.ordertime_biaoqianlist_hav.length;
            if (item.name == '未邀约') {
                this.ordertime_biaoqianlist[item.date]['weiyaoyue'].click = 1;
            }
            if (item.name == '未到课') {
                this.ordertime_biaoqianlist[item.date]['weidaoke'].click = 1;
            }

            console.log(this.ordertime_biaoqianlist);
            console.log(this.ordertime_biaoqianlist_hav);
        },
        ordertime_biaoqian_all() {
            this.ordertime_biaoqian_allweiyaoyue();
            this.ordertime_biaoqian_allweidaoke();
        },
        ordertime_biaoqian_allweiyaoyue() {
            this.ordertime_biaoqianlist=Object.values(this.ordertime_biaoqianlist);
            this.ordertime_biaoqianlist.forEach((item, index)=> {
                if (this.ordertime_biaoqianlist_hav.length > 0) {
                    var a = true;
                    this.ordertime_biaoqianlist_hav.forEach(element2 => {
                        if (item.weiyaoyue.id == element2.id) {
                            a = false;
                        }
                    });
                    if (a) {
                        this.ordertime_biaoqianlist_hav.push(item.weiyaoyue);
                    }
                } else {
                    this.ordertime_biaoqianlist_hav.push(item.weiyaoyue);
                }

                this.ordertime_biaoqianlist_hav_count = this.ordertime_biaoqianlist_hav.length;
                this.ordertime_biaoqianlist[index]['weiyaoyue'].click = 1;
            });
        },
        ordertime_biaoqian_allweidaoke() {
            this.ordertime_biaoqianlist=Object.values(this.ordertime_biaoqianlist);

            this.ordertime_biaoqianlist.forEach((item, index) => {
                if (this.ordertime_biaoqianlist_hav.length > 0) {
                    var a = true;
                    this.ordertime_biaoqianlist_hav.forEach(element2 => {
                        if (item.weidaoke.id == element2.id) {
                            a = false;
                        }
                    });
                    if (a) {
                        this.ordertime_biaoqianlist_hav.push(item.weidaoke);
                    }
                } else {
                    this.ordertime_biaoqianlist_hav.push(item.weidaoke);
                }

                this.ordertime_biaoqianlist_hav_count = this.ordertime_biaoqianlist_hav.length;
                this.ordertime_biaoqianlist[index]['weidaoke'].click = 1;
            });
        },
        ordertime_clickbiaoqiandel(index, item) {

            this.ordertime_biaoqianlist_hav.splice(index, 1);
            this.ordertime_biaoqianlist_hav_count = this.ordertime_biaoqianlist_hav.length;
            if (item.name == '未邀约') {
                this.ordertime_biaoqianlist[item.date]['weiyaoyue'].click = 0;
            }
            if (item.name == '未到课') {
                this.ordertime_biaoqianlist[item.date]['weidaoke'].click = 0;
            }

        },

        ordertime_delall(){
            this.$confirm('此操作将删除所有已选标签, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.ordertime_biaoqianlist_hav = [];
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        ordertime_submitbiaoqianForm() {

            if (this.ordertime_biaoqianlist_hav.length <= 0) {
                this.$notify({
                    title: '警告',
                    message: '至少一个标签',
                    type: 'warning'
                });
                return;
            }

            if (this.senddata.length > 0) {

                this.ordertime_biaoqianlist_hav.forEach(element => {
                    var a = true;
                    this.senddata.forEach(element2 => {
                        element['user'].forEach(element3 => {
                            if (element3.userid == element2.userid) {
                                a = false;
                            }
                        });

                    });
                    if (a) {
                        element['user'].forEach(element4 => {
                            delete element4['date'];
                            this.senddata.push(element4);
                        });
                    }
                });
            } else {
                this.ordertime_biaoqianlist_hav.forEach(element => {
                    element['user'].forEach(element2 => {
                        delete element2['date'];
                        this.senddata.push(element2);
                    });

                });
            }
            this.senddata_count = this.senddata.length;
            console.log(this.senddata);
            this.ordertime_biaoqianopen = false;
        },

        ordertime_adduserbydate() {
            console.log(this.ordertime_adddate);
            if (this.ordertime_adddate.length != 2) {
                this.$notify({
                    title: '警告',
                    message: '开始和结束时间不能为空',
                    type: 'warning'
                });
                return;
            }
            let data = {
                "startdate": this.ordertime_adddate[0].toLocaleString('zh-cn'),
                "enddate": this.ordertime_adddate[1].toLocaleString('zh-cn'),
                "sender": this.sender,
                "venue": this.venue,
            }

            ordertime_queryUser(data).then((res) => {
                console.log(res);
                if (res.data.length == 0) {
                    this.$notify({
                        title: '警告',
                        message: '没有找到该时间段内的用户',
                        type: 'warning'
                    });
                    return;
                }
                this.ordertime_biaoqianlist = res.data.list;
            });
        },

        adduserbydate() {
            console.log(this.adddate);
            if (this.adddate.length != 2) {
                this.$notify({
                    title: '警告',
                    message: '开始和结束时间不能为空',
                    type: 'warning'
                });
                return;
            }
            let data = {
                "startdate": this.adddate[0].toLocaleString('zh-cn'),
                "enddate": this.adddate[1].toLocaleString('zh-cn'),
                "sender": this.sender
            }

            queryUser(data).then((res) => {
                if (res.data.length == 0) {
                    this.$notify({
                        title: '警告',
                        message: '没有找到该时间段内的用户',
                        type: 'warning'
                    });
                    return;
                }
                if (this.senddata.length > 0) {
                    res.data.forEach(element => {
                        var a = true;
                        this.senddata.forEach(element2 => {
                            if (element.userid == element2.userid) {
                                a = false;
                            }
                        });
                        if (a) {
                            this.senddata.push(element);
                        }
                    });
                } else {
                    res.data.forEach(element => {
                        this.senddata.push(element);
                    });
                }
                this.senddata_count = this.senddata.length;

                
                this.senddata.forEach(element => {
                    this.senddata_zhujiao[element.zhujiaoname] = this.senddata_zhujiao[element.zhujiaoname] ? (this.senddata_zhujiao[element.zhujiaoname] +1):1;
                });

                var senddata_zhujiao2 = [];
                this.senddata_zhujiao.forEach((item,index)=>{
                    senddata_zhujiao2.push({'a':index,'b':item});
                });

                console.log(this.senddata);
                console.log(this.senddata_zhujiao);
                console.log(senddata_zhujiao2);
            });
        },
        adduserbyname() {
            console.log(this.wx_name2);
            if (this.wx_name2 == '') {
                this.$notify({
                    title: '警告',
                    message: '请选输入关键字',
                    type: 'warning'
                });
                return;
            }
            let data = {
                "wx_name": this.wx_name2,
                "sender": this.sender
            }

            queryUser(data).then((res) => {
                if (res.data.length == 0) {
                    this.$notify({
                        title: '警告',
                        message: '没有找到该包含关键字的用户',
                        type: 'warning'
                    });
                    return;
                }
                if (this.senddata.length > 0) {
                    res.data.forEach(element => {
                        var a = true;
                        this.senddata.forEach(element2 => {
                            if (element.userid == element2.userid) {
                                a = false;
                            }
                        });
                        if (a) {
                            this.senddata.push(element);
                        }
                    });
                } else {
                    res.data.forEach(element => {
                        this.senddata.push(element);
                    });
                }
                this.senddata_count = this.senddata.length;
            });
        },
        clickkehudel(data) {
            this.senddata.forEach((item, index) => {
                if (data.userid == item.userid) {
                    this.senddata.splice(index, 1);
                }
            });
            this.senddata_count = this.senddata.length;
        },
        goback() {
            // this.$router.push({ path: '/live/invitation/invitation?liveId=' + this.liveId });
            // this.$router.go(-1); // 或者 this.$router.back();
            this.$router.back();
        },
        savepublish() {

            if (this.title == '') {
                this.$notify({
                    title: '警告',
                    message: '邀约计划名称不能为空',
                    type: 'warning'
                });
                return;
            }

            if (this.senddata.length == 0) {
                this.$notify({
                    title: '警告',
                    message: '至少选择一位用户',
                    type: 'warning'
                });
                return;
            }

            if (this.textarea == '') {
                this.$notify({
                    title: '警告',
                    message: '群发内容不能为空',
                    type: 'warning'
                });
                return;
            }

            let a = {
                liveId: this.liveId,
                venue: this.venue,
                sender: this.sender,
                senddata: this.senddata,
                title: this.title,
                textarea: this.textarea
            }

            debounce(() => {
                savepublish(a).then((res) => {
                    console.log(res);

                    this.$alert('共发送' + res.data.zongshu + '个，发送失败' + res.data.shibaishu + '个', '完成', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$router.back();
                        }
                    });


                    // this.$router.push({ path: '/live/invitation?liveId=' + this.liveId });
                });
            });


        }



    }

}

</script>

<style lang="scss" scoped>
.biaoqian_content {
    display: flex;
    width: 100%;
}

.biaoqian_content2 {
    display: flex;
    width: 100%;
}

.biaoqian_left_content {
    margin: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(241, 241, 241);
    display: flex;
    flex-direction: column;
    width: 60%;
    overflow-y: scroll;
    /* 启用垂直滚动 */
    max-height: 500px;
    overflow: auto;
    /* 隐藏滚动条 */
    padding: 20px;
}

.biaoqian_right_content {
    margin: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(180, 180, 180);
    display: flex;
    flex-direction: column;
    width: 30%;
    overflow-y: scroll;
    /* 启用垂直滚动 */
    max-height: 500px;
    overflow: auto;
    /* 隐藏滚动条 */
    padding: 20px;
}

.biaoqian_right_content2 {
    margin: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(180, 180, 180);
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;
    /* 启用垂直滚动 */
    max-height: 500px;
    overflow: auto;
    /* 隐藏滚动条 */
    padding: 20px;
}

.biaoqian_left_content_title {
    display: flex;
}

.biaoqian_left_content_content_item_title {
    font-weight: bold;
}

.biaoqian_left_content_content {
    display: flex;
    flex-direction: column;
}

.biaoqian_left_content_content_item {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.biaoqian_left_content_content_item_content2 {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.biaoqian_left_content_content_item_content {
    display: flex;
    padding: 2px;
    margin-left: 10px;
    margin-left: 10px;
}

.biaoqian_left_content_content_item_content_title {
    border-color: #dfdfdf;
    border-width: 1px;
    border-style: solid;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}

.biaoqian_left_content_content_item_content_title2 {
    border-color: blue;
    border-width: 1px;
    border-style: solid;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}

.biaoqian_right_content_item_top {
    margin-top: 10px;
    margin-bottom: 10px;
    color: red;
}

.biaoqian_right_content_item_top2 {
    margin-top: 2px;
    margin-bottom: 10px;
    color: red;
}

.biaoqian_right_content_item {
    display: flex;
    flex-direction: column
}

.biaoqian_right_content_item_contnet {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 10px;
}

.biaoqian_right_content_label {
    border-color: rgb(245, 247, 251);
    border-width: 1px;
    border-style: solid;
}

.demonstration {
    width: 100px;
}

.renyuan_content {
    display: flex;
    width: 100%;
}

.yaoyue_neirong_content {
    display: flex;
}


.yaoyue_neirong_content_body {
    display: flex;
    flex-direction: column;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(180, 180, 180);
    padding: 10px;
    margin-left: 10px;
    width: 90%;
}

.yaoyue_neirong_content_title {
    width: 10%;
}

.yaoyue_neirong_content {
    width: 80%;
}
</style>